<script setup lang="ts">
import CommissionTable from '~comp-b/referral/commission/CommissionTable.vue';

const { inviteStats } = queries.useInviteStatisticsQuery();
const { defaultChannel } = queries.useInviteChannelQuery();
const { setEle, eleBp } = useElementBreakpoint();
</script>

<template>
  <TCard :ref="setEle" class="lt-tablet:p3" :bodyClass="clsx('grid gap-3', eleBp['2xl'] && 'grid-cols-2')">
    <!-- 邀请统计 -->
    <div class="flex items-center rounded-2 from-sys-layer-e to-sys-layer-e/10 bg-gradient-to-b p-3 text-sm">
      <!-- 我的总收入 -->
      <div class="flex-1">
        <div class="mb-1 flex items-center text-sys-text-body">
          {{ $t('jhqioldMthMkIlvrwsylo') }}
          <THelptip class="text-sys-text-body">
            {{ `${$t('rdt2qztw39rxNJbhu3j4H')} & ${$t('z8E4ejnK0EmiXvDg4BpR0')}` }}
          </THelptip>
        </div>
        <div>
          <ATooltip>
            <template #title>
              <TAmount class="mr-2 text-white" :value="inviteStats?.profit_amount ?? 0" symbol="$" format="fixed-dec" colored="inherit" iconPos="left" />
            </template>
            <TAmount class="text-base font-bold" symbol="$" :value="inviteStats?.profit_amount ?? 0" format="max-dec" :decimals="2" iconPos="left" />
          </ATooltip>
        </div>
      </div>

      <div class="divider-v-gradual self-stretch" />

      <!-- 总推荐人数 -->
      <div class="flex-1">
        <div class="mb-1 text-sys-text-body">
          {{ $t('nfQghuB5m8YYHvkGp0zS') }}
        </div>
        <div class="text-base font-bold">
          {{ bignumber($store.user.userInfo?.referral_count ?? 0).toFormat() }}
        </div>
      </div>
    </div>

    <!-- 邀请链接 -->
    <div class="grid gap-1 rounded-2 bg-sys-layer-d p-3 text-sm">
      <div class="flex items-center">
        <span class="mr-2 rounded-3 bg-green500 px-2 text-2.5 text-sys-text-head">
          {{ $t('q9Zw2lmLqFkf1yUDi7FXn') }}
        </span>
        <span>{{ $t('rzIyhjkU8vmPb0Zr6XVgy') }}</span>
      </div>
      <div
        v-if="defaultChannel"
        class="grid grid-cols-[repeat(auto-fill,minmax(270px,1fr))] mt-2 gap-3 *:flex-between"
      >
        <div>
          <span v-if="!envs.isTg">Tg：</span>{{ desensitize(defaultChannel?.telegram_invite_url, 10) }}
          <TCopy class="ml-auto" :source="defaultChannel?.telegram_invite_url" :nthParent="1" />
        </div>
        <div v-if="!envs.isTg">
          Web：{{ desensitize(defaultChannel?.web_invite_url, 10) }}
          <TCopy class="ml-auto" :source="defaultChannel?.web_invite_url" :nthParent="1" />
        </div>
        <div class="!flex-nowrap">
          {{ $t('kS728r29INmVheKz7Rre') }}：
          {{ defaultChannel?.channel_id }}
          <TCopy class="ml-auto" :source="defaultChannel?.channel_id" :nthParent="1" />
        </div>
      </div>
    </div>

    <!-- 邀请佣金 -->
    <div class="col-span-full">
      <div class="mb-3 flex-between text-base">
        <div>{{ $t('sp3kIjGwvUebVdd_04wj') }}</div>
        <div
          class="cursor-pointer px-2 text-sys-text-body -mx-2 hover:text-sys-text-head"
          @click="globalPopups.modCampaign.open({ id: defaultChannel?.channel_id })"
        >
          <i class="i-ri:edit-2-fill" />
        </div>
      </div>
      <CommissionTable :commions="defaultChannel?.commission_shares ?? []" />
    </div>

    <!-- 底部按钮 -->
    <div class="col-span-full flex">
      <AButton
        class="ant-cover__Button-3d-gray mr-3" type="primary"
        @click="globalPopups.referralShare.open({
          code: defaultChannel?.referral_code,
          url: envs.isTg ? defaultChannel?.telegram_invite_url : defaultChannel?.web_invite_url })"
      >
        <i class="i-local:share?mask text-4 text-sys-text-head" />
      </AButton>
      <AButton
        class="ant-cover__Button-3d-primary flex-1" type="primary"
        @click="globalPopups.addCampaign.open()"
      >
        {{ $t('eZs0JXngVkl_71sNxkzWi') }}
      </AButton>
    </div>
  </TCard>
</template>

<style lang="scss" scoped>

</style>
